<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 30%;
            height: 200px;
            background-color: rgb(233, 248, 214);
            border: 1px solid rgb(130, 216, 18);
            font-size: 40px;
            font-weight: 600;
            font-family: Arial, Helvetica, sans-serif;
            line-height: 200px;
            text-align: center;
            margin: 25px auto;
            border-radius: 10px;
        }
        
        span {
            display: block;
            width: 30%;
            height: 44px;
            line-height: 44px;
            background-color: rgb(6, 158, 64);
            border-radius: 10px;
            color: #fff;
            text-align: center;
            margin: 0 auto;
            font-size: 18px;
            font-family: 华文细黑;
        }
        
        span:hover {
            background-color: rgb(4, 190, 76);
        }
    </style>

</head>

<body>
    <div id="box">随机点名</div>
    <span id="span">开始</span>
    <script>
        var arr = [
            "胡宇",
            "武青源",
            "陈宣尧",
            "刘添真",
            "张鹏",
            "邓南健",
            "李康博",
            "毛黎",
            "郑龙龙",
            "蒋凯斌",
            "袁洲立",
            "吴禹博",
            "汤前英",
            "唐凯凯",
            "陈豪",
            "周湘",
            "漆文宇",
            "尹赵炜",
            "贺凌伟",
            "徐绍亮",
            "刘凤",
            "谭佳祥",
            "张平",
            "刘南格",
            "胡杨",
            "易黎",
            "朱涛",
            "罗培基",
            "赖笠",
            "曾颖祺",
            "刘中壹",
            "曾思诚",
            "唐海涛",
            "吴立沛",
            "刘佳琦",
            "刘涛",
            "贺岚",
            "宋彩霞",
            "周虹",
            "何广晨",
            "田梦琪",
            "谢培",
            "何双莲",
            "蔡世鹏",
            "田姜",
            "陈伟",
            "苏鹏",
            "谢秋晗",
            "王泽龙",
            "邓宗帅",
            "袁文峰",
            "王兴成",
            "尹隆杰",
            "李延锋",
            "李澳",
            "李紫欣",
            "何凯",
            "刘彦伶",
            "李高志成",
            "杨义强",
            "石春南",
            "李坤",
            "张虞",
            "陈永杰",
            "陈俊杰",
            "黄续栋",
            "刘志佳",
            "王小丽",
            "刘国盛",
            "徐晓轩",
            "刘刚"
        ]

        var box = document.getElementById("box");
        var span = document.getElementById("span"); //获取元素
        var state = 0; //定义状态，开始和结束
        var t;
        span.onclick = function() {
            if (state == 0) {
                //如果是0即开始随机，变为1时结束，不是0时执行else
                clearInterval(t);
                t = setInterval(function() {
                    // console.log(1);
                    var sj = Math.round(Math.random() * (arr.length - 1));
                    console.log(arr[sj]);
                    box.innerHTML = arr[sj];
                }, 3)
                span.innerHTML = "结束" //更改按钮的内容
                state = 1;
            } else {
                state = 0;
                clearInterval(t);
                span.innerHTML = "开始"
            }
        }
    </script>


</body>

</html>